import { Card, Table, Divider } from 'antd'
import { Line } from '@ant-design/charts'

const DataDisplayPanel = (): JSX.Element => {
  // 曲线图数据
  const chartData = [
    { year: '2010', value: 30 },
    { year: '2011', value: 52 },
    { year: '2012', value: 61 },
    { year: '2013', value: 45 },
    { year: '2014', value: 78 },
    { year: '2015', value: 65 },
    { year: '2016', value: 82 },
    { year: '2017', value: 91 },
    { year: '2018', value: 75 },
    { year: '2019', value: 88 },
    { year: '2020', value: 95 }
  ]

  // 表格数据
  const tableData = [
    { key: '1', date: '2023-01', sales: 125, profit: 45 },
    { key: '2', date: '2023-02', sales: 98, profit: 32 },
    { key: '3', date: '2023-03', sales: 156, profit: 58 },
    { key: '4', date: '2023-04', sales: 112, profit: 41 },
    { key: '5', date: '2023-05', sales: 189, profit: 72 }
  ]

  // 表格列定义
  const columns = [
    { title: '日期', dataIndex: 'date', key: 'date' },
    { title: '销售额', dataIndex: 'sales', key: 'sales' },
    { title: '利润', dataIndex: 'profit', key: 'profit' }
  ]

  // 曲线图配置
  const chartConfig = {
    data: chartData,
    xField: 'year',
    yField: 'value',
    label: {},
    point: {
      size: 5,
      shape: 'diamond'
    },
    tooltip: {
      showMarkers: false
    },
    state: {
      active: {
        style: {
          shadowBlur: 4,
          stroke: '#000',
          fill: 'red'
        }
      }
    },
    interactions: [{ type: 'marker-active' }],
    smooth: true
  }

  return (
    <div style={{ padding: 24, width: '100%', height: '100%' }}>
      <Card title="数据可视化面板" style={{ overflow: 'auto', width: '100%', height: '600px' }}>
        <div style={{ marginBottom: 24 }}>
          <h3>销售趋势图</h3>
          <Line {...chartConfig} />
        </div>

        <Divider />

        <div>
          <h3>详细数据</h3>
          <Table columns={columns} dataSource={tableData} bordered pagination={{ pageSize: 5 }} />
        </div>
      </Card>
    </div>
  )
}

export default DataDisplayPanel
